<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}

			.beijing {
				position: absolute;
				background-image: url('首页/img/背景图 (2).png');
				width: 100%;
				height: 100%;
				background-size:cover;
			}

			body {
				width: 100%;
				height: 100%;
			}

			.laoyy {
				background-image: url("首页/img/老人4.png");
				width: 180px;
				height: 180px;
				z-index: 99;
				background-size: cover;
				position: fixed;
				top: 560px;
				left: 290px;
			}

			.tishikuan {
				background-image: url('首页/img/气泡-中.png');
				position: absolute;
				background-size: cover;
				width: 400px;
				height: 300px;
				left: 150px;
				top: 40px;
				z-index: 1;
				display: none;
			}

			.p {
				margin-top: 120px;
				margin-left: 100px;
				margin-right: 100px;
			}

			.duihuakuan {
				background-image: url('首页/img/气泡-左.png');
				background-size: cover;
				width: 190px;
				height: 140px;
				z-index: 2;
				position: absolute;
				top: 570px;
				left: 428px;
				text-align: center;
				line-height: 125px;
				display: none;
			}
			.jianghua{
				background-image: url('首页/img/气泡-左.png');
				position: absolute;
				background-size: cover;
				width: 180px;
				height: 150px;
				left: 1150px;
				top: 220px;
				z-index: 1;
				text-align:center;
				line-height: 160px;
				padding-right:30px;
				padding-left:30px;
				display: none;
			}
			.content{
				width:600px;
				height: 200px;
				position:fixed;
				left: 350px;
				top: 260px;
				display: none;
				color: red;
				overflow: hidden;
				z-index: 80;
				background-color: rgb(128,128,128,0.9);
				border-radius: 15%;
			}
			.content .img-box{
				overflow:hidden;
				position: relative;
				width:110px;
				height:110px;
				display: inline-block;
				cursor:pointer;
				margin-left: 70px;
				margin-top: 35px;
			}
			.content img{
				position: absolute;
				top:0;
				left:0;
				width:110px;
				height: 110px;
				transition:all .5s;
			}
			.content .overlay{
				position: absolute;
				width:110px;
				height: 110px;
				top:0;
				left:0;
				z-index:9;
				line-height:135px;
				text-align: center;
				background-color: rgba(0,0,0,.5);
				opacity: 0;
			}
			.content .title{
			    color:#fff;
			}
			.img-box:hover img{
			    transform:scale(1.2);
			}
			.img-box:hover .overlay{
			    opacity: 1;
			}
			.xts{
				position: fixed;
				width: 1000px;
				height: 650px;
				overflow: hidden;
				left: 300px;
				top: 50px;
				z-index: 100;
				display: none;
			}
			.xts .xt{
				position: absolute;
				left: 0px;
				top: 0px;
				width: 1000px;
				height: 650px;
				z-index: 101;
			}
			.cha{
				position: absolute;
				z-index: 102;
				width: 80px;
				height: 80px;
				left: 0px;
			}
			.hongse{
				position:absolute;
				width:80px;
				height: 80px;
				top:0px;
				left:0px;
				z-index:103;
				background-color: rgba(255,0,0,.5);
				opacity: 0;
			}
			.cc:hover .hongse{
				opacity: 1;
			}
			.cc{
				position: fixed;
				z-index: 102;
				width: 80px;
				height: 80px;
				left: 1220px;
				top: 50px;
				cursor:pointer;
			}
		</style>
		<script src="首页/jswj/jquery-2.2.4.js"></script>
		<script>
			window.onload = function() {
				var dd = document.getElementById('laoyy');
				var k=0;
				document.onkeydown = function(event) {
					event = event || window.event;
					var speed = 10;
					switch (event.keyCode) {
						case 38:
							dd.style.top =dd.offsetTop - speed + "px";
							console.log(dd.style.left+','+dd.style.top)
							break;
						case 40:
							dd.style.top = dd.offsetTop + speed + "px";
							console.log(dd.style.left+','+dd.style.top)
							break;
						case 37:
							dd.style.left =dd.offsetLeft - speed + "px";
							console.log(dd.style.left+','+dd.style.top)
							break;
						case 39:
							dd.style.left = dd.offsetLeft + speed + "px";
							console.log(dd.style.left+','+dd.style.top)
							break;
					}
					if(parseInt(dd.style.left)<1030&&parseInt(dd.style.left)>900&&parseInt(dd.style.top)>230&&parseInt(dd.style.top)<300&&k==0){
						setTimeout(function(){
							document.getElementById('jianghua').style.display='block'
							document.getElementById('laoyy').style.backgroundImage =
								"url('首页/img/老爷爷.gif')"
						},500)
						setTimeout(function(){
							document.getElementById('jianghua').innerHTML=''
							document.getElementById('jianghua').innerHTML='我是不是被骗了'
						},1500)
						setTimeout(function(){
							document.getElementById('jianghua').innerHTML=''
							document.getElementById('jianghua').innerHTML='不行，我得去报警'
						},2500)
						setTimeout(function(){
							document.getElementById('jianghua').style.display='none'
							document.getElementById('laoyy').style.backgroundImage =
								"url('首页/img/老人4.png')"
						},3000)
						k=1;
						setTimeout(function(){
							document.getElementById('tishikuan').style.display = 'block'
							document.getElementById('tishi').innerHTML=''
							document.getElementById('tishi').innerHTML='报警之后，警察说卖药的是骗子，以后不要轻信这种话'
						},5000)
						setTimeout(function(){
							document.getElementById('zuihou').style.display = 'block'
						},5500)
					}

				}
			}
		</script>
	</head>
	<body>
		<div class="beijing">
			<div class="xts" id="xts">
				<img src="首页/img/保健品诈骗提醒.png" alt="" id="xt">
				<div class="cc" id="cc">
					<img src="首页/img/叉.png" alt="" id="cha" class="cha">
					<div class="hongse"></div>
				</div>	
			</div>
			<div id="tishikuan" class="tishikuan">
				<div class="p" id="tishi">老爷爷好像有话要说，点击他一下试试看吧</div>
			</div>
			<div id="duihuakuan" class="duihuakuan">
				药吃了一个星期了
			</div>
			<div id="laoyy" class="laoyy"></div>
			<div class="jianghua" id="jianghua">怎么回事，怎么不在了</div>
			<div id="zuihou" class="content">
				<div id="xiajie" class="img-box">
					<img src="首页/img/下阶段.png" alt="" id="xiajieduan">
					<div class="overlay">
					    <div class="title" id='xuan1'>首页</div>
					</div>
				</div>
				<div id="xiaotiesi" class="img-box">
					<img src="首页/img/小贴士.png" alt="" id="xiaotiesi">
					<div class="overlay">
						<div class="title" id="xuan2">小贴士</div>
					</div>
				</div>
				<div id="xiaoyouxi" class="img-box">
					<img src="首页/img/小游戏.png" alt="" id="xiaoyouxi">
					<div class="overlay">
						<div class="title" id="xuan3">小游戏</div>
					</div>
				</div>
			</div>
		</div>
		<script>
			$(function() {
				setTimeout(function() {
					document.getElementById('tishikuan').style.display = 'block'
				}, 1000)

				setTimeout(function() {
					document.getElementById('tishikuan').style.display = 'none'
				}, 3000)
				var key = 1;
				$('#laoyy').click(function() {
					if(key==1){
					setTimeout(function() {
						document.getElementById('duihuakuan').style.display = 'block'
						document.getElementById('laoyy').style.backgroundImage =
							"url('首页/img/老爷爷.gif')"
					}, 500)
					setTimeout(function() {
						document.getElementById('duihuakuan').innerHTML = ''

						document.getElementById('duihuakuan').innerHTML = '怎么没啥效果啊'
					}, 1500)
					setTimeout(function() {
						document.getElementById('duihuakuan').innerHTML = ''
						document.getElementById('duihuakuan').innerHTML = '我去问问那个卖药的'
						document.getElementById('laoyy').style.backgroundImage =
							"url('首页/img/老人4.png')"
					}, 2500)
					setTimeout(function() {
						document.getElementById('duihuakuan').style.display = 'none'
					}, 3500)
					key=2
					}
				})
				$('#xiajie').click(function(){
					window.location.href='index.html'
				})
				$('#xiaoyouxi').click(function(){
					window.location.href='zhaochayouxi.html'
				})
				$('#xiaotiesi').click(function(){
					document.getElementById('xts').style.display='block'
				})
				$('#cc').click(function(){
					document.getElementById('xts').style.display='none'
				})
			})
		</script>
	</body>
</html>
